<template>
	<view class="order">
    <view class="me-head">
      <u-sticky bgColor="#fff">
        <u-tabs active-color="#2aac34" :list="allList" :is-scroll="false" :current="tabsIndex" @change="tabClick"></u-tabs>
      </u-sticky>
    </view>
    <u-empty mode="order" v-if="!orderList.length"></u-empty>

		<div class="order-list" v-if="orderList.length">
      <div class="order-item" v-for="item in orderList" :key="item.id">
        <div class="order-header">
          <span>订单编号：{{ item.order_no }}</span>
          <span>{{ item.statusName}}</span>
        </div>
        <u-line></u-line>
        <div class="image-list">
          <div class="car-item" v-for="good in item.orderGoodsDetails" :key="good.id">
            <u-image :src="baseUrl + good.good.image" :width="160" :height="160" mode="aspectFit"></u-image>
            <div class="goods-detail">
              <div class="goods-price-box">
                <div class="goods-name">{{ good.good.name }}</div>
                <div class="goods-price">￥{{ good.good.price }}</div>
              </div>
              <div class="goods-price-box">
                <div class="goods-price"></div>
                <div class="goods-count">
                  <span class="goods-count-value">x {{ good.count }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="total coupon" v-if="item.couponValue">
          <span>优惠金额：</span>
          <span class="total-value">-￥{{ item.couponValue }}</span>
        </div>
        <div class="total">
          <span>实际付款：</span>
          <span class="total-value">￥{{ item.total }}</span>
        </div>
        <u-line></u-line>
        <div class="button-list">
          <div>
            <u-button v-if="item.address_id && item.buttonShow.express"  style="margin-left: 10px" size="mini" @click="orderDetail(item)"  type="primary" :ripple="true" shape="circle" plain>查看物流</u-button>
            <u-button v-if="item.buttonShow.tuikuan"  style="margin-left: 10px" size="mini" @click.stop="backOrder(item)"  type="error" :ripple="true" shape="circle">退款申请</u-button>
            <u-button v-if="item.buttonShow.confirm" style="margin-left: 10px" size="mini" @click.stop="confirmOrder(item)"  type="primary" :ripple="true" shape="circle">确认收货</u-button>
            <u-button v-if="item.buttonShow.delete"  style="margin-left: 10px" size="mini" @click.stop="deleteOrder(item)"  type="error" :ripple="true" shape="circle" plain>删除</u-button>
          </div>
        </div>
      </div>
      <u-modal v-model="backShow" show-cancel-button @confirm="backConfirm">
        <div style="padding: 40px 30px">
          <u-input placeholder="请输入退货理由" v-model="backReason" type="text" :border="true"  />
        </div>
      </u-modal>
      <u-modal v-model="deleteShow" show-cancel-button @confirm="deleteConfirm" >
        <div style="line-height: 80px;text-align: center">确认删除？</div>
      </u-modal>
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        tabsIndex: 0,
        allList: [
          {tabId: 0,name: '全部'},
          {tabId: 1,name: '待发货'},
          {tabId: 2,name: '待收货'},
          {tabId: 3,name: '退款中'},
        ],
        orderList: [],
        baseUrl: this.$baseUrl,
        backShow: false,
        currentOrder: {},
        backReason: '',
        deleteShow: false
			}
		},
    onLoad({ index }) {
      this.tabsIndex = index
      this.getOrderList()
    },
		methods: {
      getOrderList() {
        this.$api.orderList({
          index: this.tabsIndex,
          member_id: uni.getStorageSync('userInfo').id
        }).then(res => {
          this.orderList = res.map(el => {
            let buttonShow = {
              express:false,
              tuikuan: false,
              shouhuo: false,
              confirm: false,
              delete: false
            }
            const couponValue = el?.coupon?.value || 0
            return {
              ...el,
              couponValue,
              total: el.orderGoodsDetails.reduce((total, el) => {
                total += el.good.price * el.count
                return total
              }, 0) - couponValue,
              statusName: this.getStatus(el,buttonShow),
              buttonShow
            }
          })
        }).catch(err => {
          console.log(err)
        })
      },
      tabClick(index){
        this.tabsIndex = index
        this.getOrderList()
      },
      getStatus(item, buttonShow) {
        if (item.order_status === 0) {
          if (item.status === 1) {
            return '待支付'
          } else if (item.status === 2) {
            buttonShow.tuikuan = true
            return '待发货'
          } else if (item.status === 3) {
            if (item.order_type == 1) {
              return '配送中'
            } else if (item.order_type == 0){
              return '待自提'
            } else if (item.order_type == 2){
              buttonShow.express = true
              return '物流中'
            }
          } else if (item.status === 4) {
            buttonShow.tuikuan = true
            buttonShow.express = true
            buttonShow.confirm = true
            buttonShow.delete = false
            return '待收货'
          } else if (item.status === 5) {
            buttonShow.tuikuan = false
            buttonShow.express = true
            buttonShow.delete = true
            return '交易成功'
          }
        } else if (item.order_status === 1) {
          buttonShow.express = true
          return '退款审核中'
        } else if (item.order_status === 2) {
          buttonShow.delete = true
          buttonShow.express = true
          return '退款成功'
        } else if (item.order_status === 3) {
          buttonShow.delete = true
          buttonShow.express = true
          return '退款失败'
        }
      },
      orderDetail(item) {
        this.$u.route({
          url: '/pages/order/detail',
          params: {
            id: item.id
          }
        })
      },
      backOrder(item) {
        this.currentOrder= item
        this.backShow = true
      },
      backConfirm() {
        if (!this.backReason) {
          uni.showToast({
            title: '请输入退货理由',
            icon: 'none'
          })
          this.backShow = true
          return
        }
        this.$api.updateOrder({
          id: this.currentOrder.id,
          order_status: 1,
          back_reason: this.backReason,
          status: 8
        }).then(res => {
          uni.showToast({
            title: '退货申请',
            icon: 'success'
          })
          this.getOrderList()
        }).catch(err => {
          console.log(err)
        })
      },
      confirmOrder(item) {
        this.$api.updateOrder({
          id: item.id,
          status: 5
        }).then(res => {
          uni.showToast({
            title: '收货成功',
            icon: 'success'
          })
          this.getOrderList()
        }).catch(err => {
          console.log(err)
        })
      },
      deleteOrder(item) {
        this.currentOrder = item
        this.deleteShow = true
      },
      deleteConfirm() {
        this.$api.deleteOrder({
          id: this.currentOrder.id
        }).then(res => {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          })
          this.getOrderList()
        }).catch(err => {
          console.log(err)
        })
      }
		}
	}
</script>

<style scoped lang="scss">
.order {
  background-color: #f7f8fa;
  height: 100%;
  overflow: auto;
}

.order-list {
  padding: 20rpx;
}
.order-item {
  border-radius: 10rpx;
  background-color: #FFFFFF;
  margin-bottom: 20rpx;
  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 20rpx;
  }
  .button-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20rpx;
  }
  .total {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx 40rpx;
  }
  .coupon {
    color: #dd6161;
  }
  .image-list {
    display: flex;
    flex-wrap: wrap;
    .car-item {
      width: 100%;
      position: relative;
      box-sizing: border-box;
      padding: 16rpx 32rpx;
      color: #323233;
      font-size: 24rpx;
      background-color: #FFFFFF;
      display: flex;
      .goods-detail {
        margin-left: 10px;
        flex-grow: 1;
        .goods-name {
          font-size: 28rpx;
          color: #000000;
          margin-bottom: 10px;
        }
        .goods-price-box {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          .goods-price {
            color: #2aac34;
            font-size: 28rpx;
          }
          .goods-count {
            display: flex;
            .goods-count-value{
              margin: 0 10px;
              font-size: 28rpx;
            }
          }
        }
      }
    }
  }
}
</style>